<template>
    <div>
        <el-form :model="account" ref="form" label-width="120px" :rules="rules">
            <el-form-item label="名称：" prop="name">
                <el-input v-model="account.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="编号：" prop="accNumber">
                <el-input v-model="account.accNumber" placeholder="请输入编号"></el-input>
            </el-form-item>
            <el-form-item label="期初金额：" prop="initialAmount">
                <el-input v-model="account.initialAmount" placeholder="请输入期初金额"></el-input>
            </el-form-item>
            <el-form-item label="当前余额：" prop="currentAmount">
                <el-input v-model="account.currentAmount" placeholder="请输入当前余额"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="account.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input
                    v-model="account.remark"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
            <el-row :gutter="20" style="height: 30px">
                <el-col :span="24" :offset="0">
                    <el-form-item style="float: right;">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="onSubmit(form)">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import {defineEmits,defineProps, ref} from 'vue'
import request from '@/api/request'
import { ElMessage } from 'element-plus';

let emits = defineEmits(['close'])
let props = defineProps(['data'])

let account = ref({...props.data})

let form = ref()

let existingNames = ref([])

let init = () =>{
    request({
        url:'/basic/account/find',
        method: "get",
    }).then(res => {
        existingNames.value = res.data.records.map(record => record.name);
    })
}
init()

//判断名称是否存在
function checkNameExists(rule, value, callback) {
    if (existingNames.value.includes(value)) {
        callback(new Error('名称已存在，请选择其他名称!'));
    } else {
        callback();
    }
}

//校验规则
let rules = {
    name: [
        { required: true, message: '请输入名称!', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' },
        { validator: checkNameExists, trigger: 'blur' }
    ],
    accNumber: [
        { required: true, message: '请输入编号', trigger: 'blur' },
        { pattern: /^[0-9]{6}$/, message: '编号必须是6位数字', trigger: 'blur' }
      ],
    initialAmount: [
        { required: true, message: '请输入期初金额!', trigger: 'blur' },
    ],
    currentAmount: [
        { required: true, message: '请输入当前余额！', trigger: 'blur' },
    ]
}

//编辑
let onSubmit =(formEl)=>{
    formEl.validate(valid =>{
        if(valid) {
            request.put("/basic/account/update", account.value,{
                body: JSON.stringify(account.value)
            }).then(resp=>{
                ElMessage.success(resp.data)
                emits('close')
            }).catch((err)=>{
                ElMessage.error(err)
            })
        }
    })
}

let close = ()=>{
    emits('close')
}

</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 350px;
}
</style>
